<template>
	<view class="container">
		<view class="tab-container">
			<view class="tab-header">
				<view class="uni-flex uni-row">
					<view class="flex-item" :class="currentTab === 0 ? 'active' : ''" @tap="changeTab(0)">
						<text>购买订单</text>
					</view>
					<view class="flex-item" :class="currentTab === 1 ? 'active' : ''" @tap="changeTab(1)">
						<text>出售订单</text>
					</view>
				</view>
			</view>
			
			<view class="tab-content">
				<!-- 购买订单 -->
				<view v-if="currentTab === 0" class="order-section">
					<view class="order-item" v-for="(item, index) in buyOrders" :key="index">
						<view class="order-header">
							<text class="order-time">{{item.createTime}}</text>
							<text class="order-status" :class="item.status === '待付款' ? 'status-wait' : 'status-success'">{{item.status}}</text>
						</view>
						<view class="order-content">
							<image :src="item.image" mode="aspectFill" class="order-image"></image>
							<view class="order-info">
								<text class="order-title">{{item.title}}</text>
								<text class="order-price">¥{{item.price}}</text>
							</view>
						</view>
						<view class="order-footer">
							<button class="action-btn" @tap="handleOrderAction(item)">查看详情</button>
						</view>
					</view>
				</view>
				
				<!-- 出售订单 -->
				<view v-if="currentTab === 1" class="order-section">
					<view class="order-item" v-for="(item, index) in sellOrders" :key="index">
						<view class="order-header">
							<text class="order-time">{{item.createTime}}</text>
							<text class="order-status" :class="item.status === '待发货' ? 'status-wait' : 'status-success'">{{item.status}}</text>
						</view>
						<view class="order-content">
							<image :src="item.image" mode="aspectFill" class="order-image"></image>
							<view class="order-info">
								<text class="order-title">{{item.title}}</text>
								<text class="order-price">¥{{item.price}}</text>
							</view>
						</view>
						<view class="order-footer">
							<button class="action-btn" @tap="handleOrderAction(item)">查看详情</button>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				buyOrders: [
					{
						id: 1,
						createTime: '2024-03-20 10:00',
						status: '待付款',
						title: '商品名称1',
						price: '199.00',
						image: '/static/images/default.png'
					},
					{
						id: 2,
						createTime: '2024-03-19 15:30',
						status: '已发货',
						title: '商品名称2',
						price: '299.00',
						image: '/static/images/default.png'
					}
				],
				sellOrders: [
					{
						id: 3,
						createTime: '2024-03-20 09:00',
						status: '待发货',
						title: '商品名称3',
						price: '399.00',
						image: '/static/images/default.png'
					},
					{
						id: 4,
						createTime: '2024-03-18 14:20',
						status: '已完成',
						title: '商品名称4',
						price: '499.00',
						image: '/static/images/default.png'
					}
				]
			}
		},
		methods: {
			changeTab(index) {
				this.currentTab = index;
			},
			handleOrderAction(order) {
				uni.navigateTo({
					url: `/pages/order/detail?id=${order.id}`
				});
			}
		}
	}
</script>

<style>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
	}
	
	.tab-container {
		background-color: #ffffff;
		border-radius: 16rpx;
		margin: 16rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
	}
	
	.tab-header {
		background-color: #ffffff;
		border-bottom: 1rpx solid #f0f0f0;
	}
	
	.uni-flex {
		display: flex;
	}
	
	.uni-row {
		flex-direction: row;
	}
	
	.flex-item {
		flex: 1;
		text-align: center;
		padding: 24rpx 0;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		position: relative;
		transition: all 0.3s;
	}
	
	.flex-item text {
		display: block;
		width: 100%;
		height: 100%;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #666;
	}
	
	.flex-item.active {
		color: #FF6B00;
	}
	
	.flex-item.active::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 48rpx;
		height: 6rpx;
		background-color: #FF6B00;
		border-radius: 3rpx;
	}
	
	.tab-content {
		padding: 16rpx;
	}
	
	.order-section {
		padding: 8rpx 0;
	}
	
	.order-item {
		background-color: #ffffff;
		border-radius: 12rpx;
		margin-bottom: 16rpx;
		padding: 20rpx;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
	}
	
	.order-header {
		display: flex;
		justify-content: space-between;
		margin-bottom: 16rpx;
	}
	
	.order-time {
		font-size: 22rpx;
		color: #999;
	}
	
	.order-status {
		font-size: 22rpx;
		padding: 2rpx 12rpx;
		border-radius: 16rpx;
	}
	
	.status-wait {
		color: #FF6B00;
		background-color: rgba(255, 107, 0, 0.1);
	}
	
	.status-success {
		color: #07c160;
		background-color: rgba(7, 193, 96, 0.1);
	}
	
	.order-content {
		display: flex;
		margin-bottom: 16rpx;
	}
	
	.order-image {
		width: 140rpx;
		height: 140rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
	}
	
	.order-info {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}
	
	.order-title {
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	
	.order-price {
		font-size: 32rpx;
		color: #ff5500;
		font-weight: bold;
	}
	
	.order-footer {
		display: flex;
		justify-content: flex-end;
		margin-top: 16rpx;
		padding-top: 16rpx;
		border-top: 1rpx solid #f5f5f5;
	}
	
	.action-btn {
		font-size: 24rpx;
		color: #666;
		background-color: #f5f5f5;
		padding: 8rpx 32rpx;
		border-radius: 24rpx;
	}
</style>